<#include "/common/_layout.html"/>
<@layout>
	<style>
		.title {
			margin: 0;
			padding: 20px 0;
		}
		
		#app {
			padding: 0 20px;
		}
	</style>
	<div id="app">
		<h3 class="title">{{moduleName}}</h3>
		<el-row>
			<el-button type="primary" icon="plus" @click="addCustomerDialog.dialogVisible = true">添加</el-button>
		</el-row>
		<el-table ref="table" :data="tableData" border style="margin-top: 10px;" v-loading="loading" element-loading-text="拼命加载中">
			<el-table-column prop="customer_name" label="姓名" align='center'>
			</el-table-column>
			<el-table-column prop="customer_phone" label="手机号" align='center'>
			</el-table-column>
			<el-table-column prop="customer_address" label="地址" align='center'>
			</el-table-column>
			<el-table-column prop="customer_company" label="公司" align='center'>
			</el-table-column>
			<el-table-column prop="create_time" label="创建时间" align='center'>
			</el-table-column>
			<el-table-column label="操作" align='center' align='center'>
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 10px;" ref="pagination" :total="pagination.total" :current-page="pagination.currentPage" :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange" layout="prev, pager, next, total, sizes">
		</el-pagination>

		<el-dialog title="添加客户" :visible="addCustomerDialog.dialogVisible" @open="onOpen('addCustomerDialog','${ctx}/customer/addCustomer')" @close="onClose('addCustomerDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="addCustomerDialog" :src="addCustomerDialog.url" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; height: 350px;width: 100%;" scroll="no"></iframe>
		</el-dialog>
		<el-dialog title="修改客户" :visible="editCustomerDialog.dialogVisible" @open="onOpen('editCustomerDialog','${ctx}/customer/editCustomer')" @close="onClose('editCustomerDialog')" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<iframe id="editCustomerDialog" :src="editCustomerDialog.url" frameborder="0" style="margin: 0; padding: 0px; overflow: hidden; height: 350px;width: 100%;" scroll="no"></iframe>
		</el-dialog>

	</div>

	<script type="text/javascript">
		var selectData;
		var _vue = new Vue({
			el: '#app',
			data: function() {
				return {
					moduleName: "客户管理",
					loading: true,
					tableData: [],
					pagination: {
						total: 0,
						pageSize: 10,
						currentPage: 1
					},
					addCustomerDialog: {
						dialogVisible: false,
						url: ""
					},
					editCustomerDialog: {
						dialogVisible: false,
						url: ""
					}
				}
			},
			methods: $.extend(commonMethods, {
				handleEdit: function(index, row) {
					selectData = row;
					this.editCustomerDialog.dialogVisible = true;
				},
				handleDelete: function(index, row) {
					selectData = row;
					var h = this.$createElement;
					var content = h('p', null, [
						h('span', null, '确认删除客户'),
						h('i', {
							style: 'color: red'
						}, row.name), h('span', null, '?')
					]);
					this.$confirm(content, "提示", {
						type: 'warning',
						callback: function(action, instance) {
							if(action == "confirm") {
								$.ajax({
									url: "${ctx}/customer/delete",
									type: "POST",
									cache: false,
									data: {
										"id": row.id
									},
									success: function(data) {
										_vue.loading = false;
										queryList();
									},
									error: function(xhr, msg, e) {},
									complete: function() {
										_vue.loading = false;
									}
								});
							}
						}
					});
				},
				levelFormatter: function(row, column) {
					if(row.role == 0) {
						return "管理员";
					} else if(row.role == 1) {
						return "客户";
					}
				}
			}),
			mounted: function() {
				// 初始请求数据
				queryList.call(this);
			}
		});

		function queryList() {
			_vue ? "" : _vue = this;
			_vue.loading = true;
			$.ajax({
				url: "${ctx}/customer/list",
				type: "POST",
				cache: false,
				data: {
					cpage: _vue.$refs.pagination.internalCurrentPage,
					pagesize: _vue.$refs.pagination.internalPageSize
				},
				success: function(data) {
					_vue.loading = false;
					_vue.tableData = data.result.list;
					_vue.pagination.total = data.result.totalRow;
					_vue.pagination.pageSize = data.result.pageSize;
				},
				error: function(xhr, msg, e) {},
				complete: function() {
					_vue.loading = false;
				}
			});
		}
	</script>
</@layout>